<template>
    <div class="main">
        <div class="from">
            <el-form :model="ruleForm" status-icon :rules="loginRules" ref="ruleFormRef" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="ruleForm.account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { userLogin } from "../../request/Login/index"
import { useCounterStore } from '../../store/index';
import { useRouter } from 'vue-router';

const counter = useCounterStore();
const router = useRouter();


type ruleForm = {
    account: string,
    password: string
}

let ruleFormRef = ref()

let ruleForm: ruleForm = reactive({
    account: "",
    password: ""
})

let loginRules: object = reactive({
    account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})

function login(): void {
    ruleFormRef.value.validate((valid: boolean) => {
        if (valid) {
            userLogin(ruleForm).then(res => {
                console.log(res);
                if (res.code === 200) {
                    counter.changeToken(res.data.token)
                    sessionStorage.setItem("token", res.data.token)
                    router.push("/home")
                }
            })
        }
    })
}
</script>

<style lang="scss" scoped>
.main {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;

    .from {
        width: 500px;
        height: 500px;
    }
}
</style>